<template>
  <van-popup v-model:show="showTop" position="top">
    <div class="flex flex-col p-5">
      <slot> </slot>
      <div class="mt-4" v-for="(item, index) in dataSource" :key="index">
        <h2 class="text-sm font-medium text-gray-900 mb-5" v-show="item.items.length > 0">
          {{ item.title }}
        </h2>
        <div class="flex flex-wrap flex-row justify-start">
          <div
            :class="['tag', subItem.selected ? 'active-tag' : '']"
            @click="onClickTag(subItem, item)"
            v-for="subItem in item.items"
            :key="subItem"
          >
            {{ subItem.label }}
          </div>
        </div>
      </div>

      <van-divider />
      <div class="flex flex-row justify-between">
        <van-button type="default" block @click="resetAction">重置</van-button>
        <div class="w-[50px]"></div>
        <van-button type="primary" color="#436BFF" block @click="confirmAction"
          >完成</van-button
        >
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import {
  ref,
  defineExpose,
  defineProps,
  computed,
  defineEmits,
  onMounted,
  watch,
} from "vue";
import { useMyXmateStore, useCommonStore } from "@/store";

const store = useMyXmateStore();
const commonStore = useCommonStore();
const emits = defineEmits(["onConfirm"]);

const systemTags = computed(() => store.systemTags);

const props = defineProps({
  customerCommunicationStages: {
    type: Array,
    default: () => [],
  },
});

const selectedDateRange = ref("");
const dateRange = ref(null);

onMounted(() => {
  setDataSource();
});

const showTop = ref(false);
function show() {
  showTop.value = true;
}

function hide() {
  showTop.value = false;
}

function onClickTag(tag, item) {
  if (!item.allowMultiple) {
    item.items.forEach((item) => {
      item.selected = false;
    });
    tag.selected = true;
  } else {
    tag.selected = !tag.selected;
  }
}

function onDateSelect(range) {
  console.log("onDateSelect:", range);
  dateRange.value = range;
  selectedDateRange.value = `${range[0]} 至 ${range[1]}`;
  showDatePicker.value = false;
}

function confirmAction() {
  const tags = dataSource.value[0].items.filter((v) => v.selected);

  let parameter = {};
  let haveCondition = false;

  if (tags.length > 0) {
    haveCondition = true;
    parameter.stageIds = tags.map((v) => v.id);
  }
  if (dateRange.value) {
    haveCondition = true;
    parameter.dateRange = dateRange.value;
  }

  if (!haveCondition) parameter = {};
  emits("onConfirm", parameter);
  hide();
}

function resetAction() {
  dataSource.value.forEach((item) => {
    item.items.forEach((v) => {
      v.selected = false;
    });
  });
  selectedDateRange.value = "";
  dateRange.value = null;
}

const dataSource = ref([]);

watch(
  () => props.customerCommunicationStages,
  (newVal) => {
    setDataSource();
  }
);

function setDataSource() {
  dataSource.value = [];
  let info = { title: "沟通环节", allowMultiple: true };
  info.items = props.customerCommunicationStages.map((v) => {
    return {
      label: v.name,
      id: v.id,
    };
  });
  dataSource.value.push(info);
}

defineExpose({
  show,
  hide,
});
</script>

<style lang="less" scoped>
.tag {
  padding: 5px 12px;
  background-color: #f4f5f5;
  font-weight: 400;
  font-size: 12px;
  color: #262626;
  line-height: 18px;
  margin: 0 8px 8px 0;
  border-radius: 4px;
  text-align: center;
}

.active-tag {
  color: #436bff;
  background-color: #f0f3ff;
}

.interest-stats {
  border-radius: 8px;
  background-color: #f8f9fa;
  padding: 12px;

  .stat-item {
    .count {
      color: #436bff;
    }
  }
}

.date-picker-trigger {
  transition: all 0.3s ease;

  &:active {
    background-color: #e5e7eb;
  }
}
</style>
